<template>
  <div class="page">
    <div class="main-box">
      <ul>
        <li>
          <div class="main-wrap vux-1px-b">
            <div class="left">
              <span>免费2小时优惠券</span>
              <span>2018-11-05 10:13:08</span>
            </div>
            <div class="right">
              <span>-1000</span>
              <div v-show="!isExtend" @click="isExtend=true">
                <span>更多</span>
                <img src="../../assets/img/ic/down_calendar@2x.png" alt="">
              </div>
              <div v-show="isExtend" @click="isExtend=false">
                <span>收起</span>
                <img src="../../assets/img/ic/up_calendar@2x.png" alt="">
              </div>
            </div>
          </div>
          <div class="extend-box vux-1px-b" v-show="isExtend">
            <ul>
              <li>
                <span>收款方：</span>
                <span>星巴克企业管理(中国)有限公司</span>
              </li>
              <li>
                <span>支付方式</span>
                <span>微信支付</span>
              </li>
              <li>
                <span>购买数量</span>
                <span>100张</span>
              </li>
              <li>
                <span>交易单号</span>
                <span>600429201810300009</span>
              </li>
              <li>
                <span>优惠券编号</span>
                <span>5678 2973 7623 2497</span>
              </li>
            </ul>
          </div>
        </li>
         <li>
          <div class="main-wrap vux-1px-b">
            <div class="left">
              <span>免费2小时优惠券</span>
              <span>2018-11-05 10:13:08</span>
            </div>
            <div class="right">
              <span>-1000</span>
              <div v-show="!isExtend" @click="isExtend=true">
                <span>更多</span>
                <img src="../../assets/img/ic/down_calendar@2x.png" alt="">
              </div>
              <div v-show="isExtend" @click="isExtend=false">
                <span>收起</span>
                <img src="../../assets/img/ic/up_calendar@2x.png" alt="">
              </div>
            </div>
          </div>
          <div class="extend-box vux-1px-b" v-show="isExtend">
            <ul>
              <li>
                <span>收款方：</span>
                <span>星巴克企业管理(中国)有限公司</span>
              </li>
              <li>
                <span>支付方式</span>
                <span>微信支付</span>
              </li>
              <li>
                <span>购买数量</span>
                <span>100张</span>
              </li>
              <li>
                <span>交易单号</span>
                <span>600429201810300009</span>
              </li>
              <li>
                <span>优惠券编号</span>
                <span>5678 2973 7623 2497</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        title:'交易流水',
        isExtend: false //是否展开(状态)
      }
    },
    created(){
      this.$store.commit('setTitle',this.title)
      this.$store.commit('setShowCloseBtn',false)
    },
  }
</script>

<style lang="less" scoped>
.main-box{
  margin-top: 1.5%;
  background: #ffffff;
  ul > li > .main-wrap{
    height: 140px;
    display: flex;
    justify-content: space-between;
    > div{
      display: flex;
      flex-direction: column;
      justify-content: center;
      &.left{
        padding-left: 20px;
        span{
          &:first-child{
            font-size: 32px;
            color: #0C0C0C;
            letter-spacing: 1.07px;
            margin-bottom: 10px;
          }
          &:last-child{
            font-size: 24px;
            color: #696969;
            letter-spacing: 1px;
          }
        }
      }
      &.right{
        padding-right: 20px;
        position: relative;
        > span{
          position: relative;
          bottom: 15px;
          font-size: 34px;
          color: #0C0C0C;
          letter-spacing: 1.13px;
        }
        div{
          position: absolute;
          top: 55px;
          left: 0;
          padding-top: 5px;
          span{
            font-size: 24px;
            color: #ABABAB;
            letter-spacing: 0.92px;
          }
          img{
            width: 48px;
            height: 48px;
            margin-top: 5px;
          }
        }
      }
    }
  }
  .extend-box{
    padding: 20px;
    ul li{
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
      span{
        font-size: 26px;
        color: #696969;
      }
    }
  }
}
</style>
